<!DOCTYPE HTML>

<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
        <title>Animate Your HTML - Part 1: CSS3 transitions and animations</title>
        <link rel="stylesheet" type="text/css" href="styles.css" />
        <link rel="stylesheet" type="text/css" href="part1 playground.css" />

        <!-- helper function that toggles the class of an element between 'begin' and 'end' -->
        <script type="text/javascript">
            function move(id) {
                var el = document.getElementById(id); {
                    el.classList.toggle('begin');
                    el.classList.toggle('end');
                }
            }
        </script>

    </head>
    <body>

        <!-- tiles -->
        <img class="movable begin" id="tile_user" src="images/tile_user.png" onclick="move('tile_user')"/>

    </body>
</html>